
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>螺旋圣诞树</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
		<style>
			* {
			  box-sizing: border-box;
			}
			body {
			  background: #233343;
			  min-height: 100vh;
			  display: flex;
			  align-items: center;
			  justify-content: center;
			  perspective: 1200px;
			  transform-style: preserve-3d;
			}
			.tree {
			  position: relative;
			  height: 50vmin;
			  width: 25vmin;
			  transform-style: preserve-3d;
			  -webkit-animation: spin 2s infinite linear;
			          animation: spin 2s infinite linear;
			}
			.tree__light {
			  transform-style: preserve-3d;
			  position: absolute;
			  height: 1vmin;
			  width: 1vmin;
			  border-radius: 50%;
			  -webkit-animation: flash calc(var(--speed) * 1s) calc(var(--delay) * 1s) infinite steps(4), appear 0.5s calc(var(--appear) * 0.05s) both;
			          animation: flash calc(var(--speed) * 1s) calc(var(--delay) * 1s) infinite steps(4), appear 0.5s calc(var(--appear) * 0.05s) both;
			  left: 50%;
			  transform: translate(-50%, 50%) rotateY(calc(var(--rotate, 0) * 1deg)) translate3d(0, 0, calc(var(--radius, 0) * 1vmin));
			  bottom: calc(var(--y, 0) * 1%);
			}
			.tree__star {
			  stroke-width: 5vmin;
			  stroke: #f5e0a3;
			  filter: drop-shadow(0 0 2vmin #fcf1cf);
			  height: 5vmin;
			  width: 5vmin;
			  overflow: visible !important;
			  bottom: 100%;
			  left: 50%;
			  transform: translate(-50%, 0);
			  position: absolute;
			  stroke-dasharray: 1000 1000;
			  fill: none;
			  -webkit-animation: stroke 1s calc((var(--delay) * 0.95) * 0.05s) both;
			          animation: stroke 1s calc((var(--delay) * 0.95) * 0.05s) both;
			}
			@-webkit-keyframes stroke {
			  from {
			    stroke-dashoffset: -1000;
			  }
			}
			@keyframes stroke {
			  from {
			    stroke-dashoffset: -1000;
			  }
			}
			@-webkit-keyframes spin {
			  to {
			    transform: rotateY(360deg);
			  }
			}
			@keyframes spin {
			  to {
			    transform: rotateY(360deg);
			  }
			}
			@-webkit-keyframes appear {
			  from {
			    opacity: 0;
			  }
			}
			@keyframes appear {
			  from {
			    opacity: 0;
			  }
			}
			@-webkit-keyframes flash {
			  0%, 100% {
			    background: #f00;
			  }
			  20% {
			    background: #fff;
			  }
			  40% {
			    background: #f00;
			  }
			  60% {
			    background: #fff;
			  }
			  80% {
			    background: #f00;
			  }
			}
			@keyframes flash {
			  0%, 100% {
			    background: #f00;
			  }
			  20% {
			    background: #fff;
			  }
			  40% {
			    background: #f00;
			  }
			  60% {
			    background: #fff;
			  }
			  80% {
			    background: #f00;
			  }
			}

		</style>
	</head>
	<body>
		<div class="tree">
		  <div class="tree__light" style="--appear: 0; --y: 0; --rotate: 1440; --radius: 12.5; --speed: 9.235939340131775; --delay: -2.416794939166802;"></div>
		  <div class="tree__light" style="--appear: 1; --y: 2; --rotate: 1411.2; --radius: 12.25; --speed: 7.165430171444827; --delay: -2.992603509592233;"></div>
		  <div class="tree__light" style="--appear: 2; --y: 4; --rotate: 1382.4; --radius: 12; --speed: 3.5061879558149545; --delay: -0.7704234444726743;"></div>
		  <div class="tree__light" style="--appear: 3; --y: 6; --rotate: 1353.6000000000001; --radius: 11.75; --speed: 4.727223159267884; --delay: -9.55238654379912;"></div>
		  <div class="tree__light" style="--appear: 4; --y: 8; --rotate: 1324.8; --radius: 11.5; --speed: 0.702989829906826; --delay: -4.2545348853934435;"></div>
		  <div class="tree__light" style="--appear: 5; --y: 10; --rotate: 1296; --radius: 11.25; --speed: 6.842573668088441; --delay: -4.560144802030952;"></div>
		  <div class="tree__light" style="--appear: 6; --y: 12; --rotate: 1267.2; --radius: 11; --speed: 5.8193198565131965; --delay: -8.605875056439737;"></div>
		  <div class="tree__light" style="--appear: 7; --y: 14; --rotate: 1238.4; --radius: 10.75; --speed: 2.0846503876210276; --delay: -5.3063898476285125;"></div>
		  <div class="tree__light" style="--appear: 8; --y: 16; --rotate: 1209.6000000000001; --radius: 10.5; --speed: 3.557653322808716; --delay: -9.760390692850308;"></div>
		  <div class="tree__light" style="--appear: 9; --y: 18; --rotate: 1180.8; --radius: 10.25; --speed: 1.8960148947228017; --delay: -7.504935308610914;"></div>
		  <div class="tree__light" style="--appear: 10; --y: 20; --rotate: 1152; --radius: 10; --speed: 5.780985817980135; --delay: -2.621278840904695;"></div>
		  <div class="tree__light" style="--appear: 11; --y: 22; --rotate: 1123.2; --radius: 9.75; --speed: 4.6461482629095325; --delay: -8.457630786176107;"></div>
		  <div class="tree__light" style="--appear: 12; --y: 24; --rotate: 1094.4; --radius: 9.5; --speed: 3.5698735204778442; --delay: -9.057038297107532;"></div>
		  <div class="tree__light" style="--appear: 13; --y: 26; --rotate: 1065.6000000000001; --radius: 9.25; --speed: 4.364226847074724; --delay: -4.2869185184038745;"></div>
		  <div class="tree__light" style="--appear: 14; --y: 28; --rotate: 1036.8; --radius: 9; --speed: 8.293982550179269; --delay: -2.6435601443750523;"></div>
		  <div class="tree__light" style="--appear: 15; --y: 30; --rotate: 1008; --radius: 8.75; --speed: 1.9193967006341217; --delay: -2.7176132384238083;"></div>
		  <div class="tree__light" style="--appear: 16; --y: 32; --rotate: 979.2; --radius: 8.5; --speed: 2.7417483297309553; --delay: -9.69257948693185;"></div>
		  <div class="tree__light" style="--appear: 17; --y: 34; --rotate: 950.4; --radius: 8.25; --speed: 4.965059464053008; --delay: -2.0292183234532923;"></div>
		  <div class="tree__light" style="--appear: 18; --y: 36; --rotate: 921.6; --radius: 8; --speed: 3.4507144463544193; --delay: -0.24875930500033006;"></div>
		  <div class="tree__light" style="--appear: 19; --y: 38; --rotate: 892.8000000000001; --radius: 7.75; --speed: 4.623270222580347; --delay: -3.0139627921223355;"></div>
		  <div class="tree__light" style="--appear: 20; --y: 40; --rotate: 864; --radius: 7.5; --speed: 7.30021060244173; --delay: -3.5103496075306784;"></div>
		  <div class="tree__light" style="--appear: 21; --y: 42; --rotate: 835.2; --radius: 7.25; --speed: 7.474359704215445; --delay: -2.5627942712423923;"></div>
		  <div class="tree__light" style="--appear: 22; --y: 44; --rotate: 806.4; --radius: 7; --speed: 5.590583616039764; --delay: -7.745015661933994;"></div>
		  <div class="tree__light" style="--appear: 23; --y: 46; --rotate: 777.6; --radius: 6.75; --speed: 1.5777330157333336; --delay: -1.3684890288021956;"></div>
		  <div class="tree__light" style="--appear: 24; --y: 48; --rotate: 748.8000000000001; --radius: 6.5; --speed: 8.385330279148729; --delay: -1.6916285405140363;"></div>
		  <div class="tree__light" style="--appear: 25; --y: 50; --rotate: 720; --radius: 6.25; --speed: 3.4813280635556287; --delay: -1.1463063165351928;"></div>
		  <div class="tree__light" style="--appear: 26; --y: 52; --rotate: 691.2; --radius: 6; --speed: 2.531417629408119; --delay: -8.142760460646276;"></div>
		  <div class="tree__light" style="--appear: 27; --y: 54; --rotate: 662.4; --radius: 5.75; --speed: 4.367492196452112; --delay: -1.7238826472625135;"></div>
		  <div class="tree__light" style="--appear: 28; --y: 56; --rotate: 633.6; --radius: 5.5; --speed: 0.5282441452925268; --delay: -4.634293723049421;"></div>
		  <div class="tree__light" style="--appear: 29; --y: 58; --rotate: 604.8000000000001; --radius: 5.25; --speed: 9.62736553198643; --delay: -9.742968649323775;"></div>
		  <div class="tree__light" style="--appear: 30; --y: 60; --rotate: 576; --radius: 5; --speed: 6.298807478191932; --delay: -9.69744756856506;"></div>
		  <div class="tree__light" style="--appear: 31; --y: 62; --rotate: 547.2; --radius: 4.75; --speed: 3.2823920877442347; --delay: -4.549345784772417;"></div>
		  <div class="tree__light" style="--appear: 32; --y: 64; --rotate: 518.4; --radius: 4.5; --speed: 3.7160843578795832; --delay: -6.843759526795516;"></div>
		  <div class="tree__light" style="--appear: 33; --y: 66; --rotate: 489.6; --radius: 4.25; --speed: 9.743623355327367; --delay: -3.404179818335633;"></div>
		  <div class="tree__light" style="--appear: 34; --y: 68; --rotate: 460.8; --radius: 4; --speed: 6.358764229861893; --delay: -3.943795641445993;"></div>
		  <div class="tree__light" style="--appear: 35; --y: 70; --rotate: 432; --radius: 3.75; --speed: 2.885667755638446; --delay: -2.8945522345047747;"></div>
		  <div class="tree__light" style="--appear: 36; --y: 72; --rotate: 403.2; --radius: 3.5; --speed: 4.513285682996493; --delay: -1.782578323939874;"></div>
		  <div class="tree__light" style="--appear: 37; --y: 74; --rotate: 374.40000000000003; --radius: 3.25; --speed: 6.826406647045089; --delay: -2.4260172130132074;"></div>
		  <div class="tree__light" style="--appear: 38; --y: 76; --rotate: 345.6; --radius: 3; --speed: 0.585280201072873; --delay: -9.011422201616426;"></div>
		  <div class="tree__light" style="--appear: 39; --y: 78; --rotate: 316.8; --radius: 2.75; --speed: 1.0689687127719627; --delay: -9.013277419467338;"></div>
		  <div class="tree__light" style="--appear: 40; --y: 80; --rotate: 288; --radius: 2.5; --speed: 0.5108224644796855; --delay: -1.418176665330264;"></div>
		  <div class="tree__light" style="--appear: 41; --y: 82; --rotate: 259.2; --radius: 2.25; --speed: 3.144571156549756; --delay: -8.804068070240177;"></div>
		  <div class="tree__light" style="--appear: 42; --y: 84; --rotate: 230.4; --radius: 2; --speed: 4.652254315939118; --delay: -8.94853049623701;"></div>
		  <div class="tree__light" style="--appear: 43; --y: 86; --rotate: 201.6; --radius: 1.75; --speed: 6.263034578172451; --delay: -3.930825152807975;"></div>
		  <div class="tree__light" style="--appear: 44; --y: 88; --rotate: 172.8; --radius: 1.5; --speed: 7.080511384244135; --delay: -4.468949602524306;"></div>
		  <div class="tree__light" style="--appear: 45; --y: 90; --rotate: 144; --radius: 1.25; --speed: 0.3096291459257583; --delay: -5.098905521491581;"></div>
		  <div class="tree__light" style="--appear: 46; --y: 92; --rotate: 115.2; --radius: 1; --speed: 5.796752055191153; --delay: -7.28713831109884;"></div>
		  <div class="tree__light" style="--appear: 47; --y: 94; --rotate: 86.4; --radius: 0.75; --speed: 4.85866465854631; --delay: -2.9911417257903494;"></div>
		  <div class="tree__light" style="--appear: 48; --y: 96; --rotate: 57.6; --radius: 0.5; --speed: 7.752292112098913; --delay: -2.74795508360385;"></div>
		  <div class="tree__light" style="--appear: 49; --y: 98; --rotate: 28.8; --radius: 0.25; --speed: 1.7070837859932286; --delay: -3.8515175108122546;"></div>
		  <svg class="tree__star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113.32 108.44" style="--delay: 50">
		    <path d="M90.19 104.33L57.12 87.38 24.4 105l5.91-36.69L3.44 42.65l36.72-5.72 16.1-33.5L73.06 36.6l36.83 4.97-26.35 26.21z" fill="none" stroke-width="6.88" stroke-linecap="round" stroke-linejoin="round"></path>
		  </svg>
		</div>
	</body>
</html>
